<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" src="log.json"></script>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1.1', {packages: ['corechart', 'controls']});

      function drawVisualization() {
        var dashboard = new google.visualization.Dashboard(
             document.getElementById('dashboard'));
      
         var control = new google.visualization.ControlWrapper({
           'controlType': 'ChartRangeFilter',
           'containerId': 'control',
           'options': {
             'filterColumnIndex': 0,
             'ui': {
               'chartType': 'LineChart',
               'chartOptions': {
                 'chartArea': {'width': '90%'},
                 'hAxis': {'baselineColor': 'none'}
               },
               'chartView': {
                 'columns': [0, 3]
               },
             }
           },
         });
      
         var chart = new google.visualization.ChartWrapper({
           'chartType': 'CandlestickChart',
           'containerId': 'chart',
           'options': {
             'chartArea': {'height': '80%', 'width': '90%'},
             //'hAxis': {'slantedText': false},
             'legend': {'position': 'none'}
           },
           'view': {
             'columns': [
               {
	         'calc': function(dataTable, rowIndex) {
		   return '' + dataTable.getValue(rowIndex, 5).split(':')[1];
                 },
                 'type': 'string'
		 },
		 1, 2, 3, 4, 5]
           }
         });
      
         var data = new google.visualization.DataTable();
         data.addColumn('number', 'Timestamp');
         data.addColumn('number', 'Start');
         data.addColumn('number', 'Start');
         data.addColumn('number', 'End');
         data.addColumn('number', 'End');
	 data.addColumn({type: 'string', role: 'tooltip'});

	 for (var i = 0; i < log.length; ++i) {
	   var start = log[i]['start'];
	   var end = log[i]['end'];
	   data.addRow([start, start, start, end, end, log[i]['event'] + ': ' + log[i]['command'] + ' (' + (end - start) + ')']);
	 }
      
         dashboard.bind(control, chart);
         dashboard.draw(data);
      }

      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body>
    <div id="dashboard">
        <div id="chart" style='width: 915px; height: 300px;'></div>
        <div id="control" style='width: 915px; height: 50px;'></div>
    </div>
  </body>
</html>
